<template>
	<view>
		<image src="../../static/back-white.png" class="back" @click="back" mode=""></image>
		<image src="../../static/index.png" class="backImage" mode=""></image>
		<view class="content">
			<text class="title">登录</text>
			<text class="sub-title">请输入你的手机号和验证码</text>
			<view class="item">
				<text class="label">手机号</text>
				<view class="phone">
					<view class="area">
						<text>+86</text>
						<image src="/static/bot.png" mode=""></image>
					</view>
					<input type="number" v-model="phone" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<text class="label">短信验证码</text>
				<view class="phone">
					<input type="number" v-model="code" placeholder="请输入" />
					<text class="code" @click="getCode">{{codeText}}</text>
				</view>
			</view>
			<text class="password" @click="register">去注册</text>
			<!-- <text class="password">密码登录</text> -->

			<button class="submit" @click="submit">登录</button>
		</view>
	</view>
</template>

<script setup>
	import {
		sendCode,userRegister
	} from '@/util/api'

	import {
		ref
	} from 'vue';
	const codeText = ref("获取验证码")
	const phone = ref()
	const code = ref()
	let bok = true
	let second = 60
	const back = ()=>{
		uni.navigateBack()
	}
	const getCode = async() => {
		if (!bok) return false;
		const result = await sendCode({phone:phone.value})
		bok = false;
		let timer = setInterval(() => {
			second--
			codeText.value = `${second}秒后重试`
			if (second <= 0) {
				bok = true
				codeText.value = "重新获取"
				second = 60
				clearInterval(timer)
			}
		}, 1000)
	}
	const submit = async () => {
		const result = await userRegister({
			code: code.value,
			mobile: phone.value,
	
		})
		
		uni.setStorageSync("user", result.data.info)
		uni.setStorageSync("token", result.data.info.token)
		uni.reLaunch({
			url: "/pages/index/index"
		})
	}
	const register = ()=>{
		uni.navigateTo({
			url:"/pages/register/register"
		})
	}
</script>

<style lang="scss" scoped>
	.back{
		position: fixed;
		width: 40rpx;
		height: 40rpx;
		left:30rpx;
		top: 30rpx;
		z-index: 9;
	}
	.backImage {
		width: 750rpx;
		height: 540rpx;
		display: block;
		// position: absolute;
	}

	.password {
		display: block;
		color: #1E53E7;
		font-size: 28rpx;
		margin-left: 60rpx;
	}

	.content {
		width: 750rpx;
		position: relative;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin-top: -364rpx;
		height: calc(100vh - 176rpx);
		overflow: hidden;

		.submit {
			width: 630rpx;
			height: 92rpx;
			background: #1E53E7;
			border-radius: 16rpx;
			position: absolute;
			bottom: 68rpx;
			left: 60rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
			line-height: 92rpx;
		}

		.title {
			display: block;
			text-align: center;
			color: #181D29;
			font-size: 48rpx;
			font-weight: 500;
			margin-top: 80rpx;
			margin-bottom: 10rpx;
		}

		.sub-title {
			color: #181D29;
			font-size: 28rpx;
			display: block;
			margin-bottom: 80rpx;
			text-align: center;
		}

		.item {
			margin: 40rpx 60rpx;

			.label {
				color: #181D29;
				font-size: 28rpx;
				display: block;
			}

			.phone {
				display: flex;
				align-items: center;
				background: #F4F6FC;
				border-radius: 16rpx;
				margin-top: 16rpx;
				height: 92rpx;

				.code {
					color: #1E53E7;
					min-width: 180rpx;
					display: block;
				}

				.area {
					display: flex;
					align-items: center;
					margin-left: 30rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						display: block;
						margin-left: 10rpx;
					}
				}

				input {
					margin-top: 0;
				}
			}

			input {
				display: block;
				width: 630rpx;
				height: 92rpx;
				background: #F4F6FC;
				border-radius: 16rpx;
				text-indent: 30rpx;
				margin-top: 16rpx;
			}
		}
	}
</style>